<script lang="ts" setup>
import { getCurrentInstance, ref, inject } from 'vue'
import { onLoad, onPageScroll, onReady, onShow } from '@dcloudio/uni-app'
import TnLineProgress from '@tuniao/tnui-vue3-uniapp/components/line-progress/src/line-progress.vue'
import TnPicker from '@tuniao/tnui-vue3-uniapp/components/picker/src/picker.vue'

const openPicker = ref(false)
// const pickerValue = ref([2, 22, 223])
const pickerData = [
  {
    label: '小学部',
    value: 1,
    children: [
      {
        label: '一年级',
        value: 11,
        children: [
          {
            label: '一年级1班',
            value: 111,
          },
          {
            label: '一年级2班',
            value: 112,
          },
          {
            label: '一年级3班',
            value: 113,
          },
        ],
      },
      {
        label: '二年级',
        value: 12,
        children: [
          {
            label: '二年级1班',
            value: 121,
          },
          {
            label: '二年级2班',
            value: 122,
          },
          {
            label: '二年级3班',
            value: 123,
          },
        ],
      },
      {
        label: '三年级',
        value: 13,
        children: [
          {
            label: '三年级1班',
            value: 131,
          },
          {
            label: '三年级2班',
            value: 132,
          },
          {
            label: '三年级3班',
            value: 133,
          },
        ],
      },
    ],
  },
  {
    label: '初中部',
    value: 2,
    children: [
      {
        label: '初一',
        value: 21,
        children: [
          {
            label: '初一1班',
            value: 211,
          },
          {
            label: '初一2班',
            value: 212,
          },
          {
            label: '初一3班',
            value: 213,
          },
        ],
      },
      {
        label: '初二',
        value: 22,
        children: [
          {
            label: '初二1班',
            value: 221,
          },
          {
            label: '初二2班',
            value: 222,
          },
          {
            label: '初二3班',
            value: 223,
          },
        ],
      },
      {
        label: '初三',
        value: 23,
        children: [
          {
            label: '初三1班',
            value: 231,
          },
          {
            label: '初三2班',
            value: 232,
          },
          {
            label: '初三3班',
            value: 233,
          },
        ],
      },
    ],
  },
  {
    label: '高中部',
    value: 3,
    children: [
      {
        label: '高一',
        value: 31,
        children: [
          {
            label: '高一1班',
            value: 311,
          },
          {
            label: '高一2班',
            value: 312,
          },
          {
            label: '高一3班',
            value: 313,
          },
        ],
      },
      {
        label: '高二',
        value: 32,
        children: [
          {
            label: '高二1班',
            value: 321,
          },
          {
            label: '高二2班',
            value: 322,
          },
          {
            label: '高二3班',
            value: 323,
          },
        ],
      },
      {
        label: '高三',
        value: 33,
        children: [
          {
            label: '高三1班',
            value: 331,
          },
          {
            label: '高三2班',
            value: 332,
          },
          {
            label: '高三3班',
            value: 333,
          },
        ],
      },
    ],
  },
]
const toMyInterview = () => {
  showSetWordPopup.value = true
  console.log('每日计划单词', wordNumber.value[pickerValue.value[0]])
}
const wordNumber = ref([10, 15, 20, 25, 30])
const dayNumber = ref([] as any)
const pickerValue = ref([] as any)
//剩余单词数
const wordNumberValue = ref(1000)
const needDate = ref()
const showSetWordPopup = ref(false)
const onPickerChange = (e) => {
  if (e.detail.value[0] != pickerValue.value[0]) {
    console.log('左边')
    pickerValue.value = [e.detail.value[0], e.detail.value[0]]
    setDate()
    return
  }
  if (e.detail.value[1] != pickerValue.value[1]) {
    console.log('右边')
    pickerValue.value = [e.detail.value[1], e.detail.value[1]]
    setDate()
    return
  }
}
onLoad(() => {
  wordNumber.value.forEach((item) => {
    dayNumber.value.push(Math.ceil(wordNumberValue.value / item))
  })
  console.log(dayNumber.value)
  setTimeout(() => {
    pickerValue.value = [3, 3]
    setDate()
  }, 100)
  console.log(formatTimestampToDate(needDate.value.getTime()))
})
//将时间戳转为日期的函数
const formatTimestampToDate = (timestamp) => {
  const date = new Date(timestamp)
  const year = date.getFullYear()
  const month = (date.getMonth() + 1).toString().padStart(2, '0')
  const day = date.getDate().toString().padStart(2, '0')
  return `${year}-${month}-${day}`
}
const setDate = () => {
  //当前日期加上完成天数的时间戳
  needDate.value = formatTimestampToDate(
    new Date().getTime() + dayNumber.value[pickerValue.value[1]] * 86400000
  )
}
const openPicker1 = ref(false)
const pickerValue1 = ref(['数值1', '数值2-a', '数值4-b'])

const pickerData1 = [
  ['数值1', '数值2', '数值3', '数值4', '数值5'],
  ['数值1-a', '数值2-a', '数值3-a', '数值4-a', '数值5-a'],
  ['数值1-b', '数值2-b', '数值3-b', '数值4-b', '数值5-b'],
]
</script>

<template>
  <view class="contain">
    <view class="main_box_list">
      <view class="bookStyleBox">
        <view class="bookImg">
          <image src="../../static/images/m1.png" />
        </view>
        <view class="right_box">
          <view class="title_Line">
            <view class="title"> 自然拼读全能大课堂 </view>
          </view>
          <view class="right_text"> 每日20个，剩余151天 </view>

          <view class="progress">
            <TnLineProgress percent="60" active-color="#3388FF" height="10" />
          </view>
          <view class="text_number"> 51/1087 </view>
        </view>
      </view>
    </view>
    <TnPopup v-model="showSetWordPopup" open-direction="bottom">
      <view class="tn-p-lg setting">
        <view class="title">
          预计完成日期：
          <text>{{ needDate }}</text>
        </view>
        <view class="setting_box">
          <view class="title_box">
            <view class="text"> 每天听单词 </view>
            <view class="text"> 完成天数 </view>
          </view>

          <view class="set_box">
            <picker-view
              :value="pickerValue"
              class="picker-view"
              indicator-class="picker-view-column"
              @change="onPickerChange"
            >
              <picker-view-column>
                <view
                  class="item"
                  v-for="(item, index) in wordNumber"
                  :key="index"
                  >{{ item }}个</view
                >
              </picker-view-column>
              <picker-view-column>
                <view
                  class="item"
                  v-for="(item, index) in dayNumber"
                  :key="index"
                  >{{ item }}天</view
                >
              </picker-view-column>
            </picker-view>
          </view>
        </view>
        <!-- <TnPicker
        v-model="pickerValue1"
        v-model:open="openPicker1"
        :data="pickerData1"
      >
        <template #cancel>再考虑一下</template>
        <template #confirm>主意已决</template>
      </TnPicker> -->
      </view>
    </TnPopup>

    <view class="btn">
      <TnButton
        bg-color="#5155E6"
        text-color="#fff"
        width="100%"
        height="80rpx"
        font-size="36rpx"
        @tap="toMyInterview"
        >保存计划</TnButton
      >
    </view>
  </view>
</template>

<style lang="scss" scoped>
.contain {
  width: 100%;
  padding: 20rpx 32rpx;
  .main_box_list {
    width: 100%;
    background: #fff;
    border-radius: 20rpx;
    padding: 32rpx 32rpx 0;
    margin-top: 32rpx;
    margin-bottom: 32rpx;
    .bookStyleBox {
      width: 100%;
      display: flex;
      padding-bottom: 32rpx;
      .bookImg {
        width: 120rpx;
        height: 180rpx;
        object-fit: contain;
        margin-right: 20rpx;
      }
      .right_box {
        flex: 1;
        .title_Line {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .title {
            font-size: 36rpx;
            color: #101010;
          }
        }
        .right_text {
          font-size: 26rpx;
          color: #000000;
          font-weight: bold;
          margin: 8rpx 0;
        }
        .progress {
          margin: 16rpx 0;
        }
        .text_number {
          color: #6c6c6c;
          font-size: 28rpx;
        }
      }
    }
  }
  .setting {
    .title {
      font-size: 24rpx;
      color: #101010;
      font-weight: bold;
      text {
        color: #0f40f5;
      }
    }
    .setting_box {
      width: 100%;
      background: #fff;
      margin-top: 30rpx;
      border-radius: 20rpx;
      .title_box {
        border-bottom: 2rpx solid #e8e8e8;
        display: flex;
        justify-content: space-between;
        height: 90rpx;
        .text {
          width: 50%;
          text-align: center;
          line-height: 90rpx;
          font-size: 32rpx;
          font-weight: bold;
        }
      }
      .set_box {
        padding: 0 10rpx;
        .picker-view {
          width: 100%;
          height: 300rpx;
          margin-top: 20rpx;
        }
        .item {
          line-height: 68rpx;
          text-align: center;
        }
        :deep(.picker-view-column) {
          background: #3388ff;
          opacity: 0.3;
          color: #000000;
          font-weight: bold;
          font-size: 40rpx;
          border-radius: 10rpx;
        }
      }
    }
  }
  .btn {
    padding: 0 32rpx;
    width: 100%;
    position: fixed;
    bottom: 10rpx;
    left: 0;
  }
}
</style>
